import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import { connect } from 'react-redux';
export class MyTabbar extends Component {

  componentWillMount() {
    console.log('MyTabbar props', this.props);
  }
  render() {


    return (
      <div style={{
        display: 'fixed', bottom: 0, left: 0
      }
      }>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"


        >
          <TabBar.Item
            title="首页"
            key="Home"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(/asset/home.svg) center center /  21px 21px no-repeat'
            }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(/asset/home-on.svg) center center /  21px 21px no-repeat'
            }}
            />
            }
            selected={this.props.match.path === '/home'}

            onPress={() => {

              this.props.history.push('/home');
            }}

          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(/asset/list.svg) center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(/asset/list-on.svg) center center /  21px 21px no-repeat'
              }}
              />
            }
            title="商城"
            key="List"
            badge={'new'}
            selected={this.props.match.path === '/list'}
            onPress={() => {
              this.props.history.push('/list');
            }}

          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(/asset/cart.svg) center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(/asset/cart-on.svg) center center /  21px 21px no-repeat'
              }}
              />
            }
            title="购物车"
            key="Cart"
            badge={this.props.allNum}
            selected={this.props.match.path === '/cart'}
            onPress={() => {
              this.props.history.push('/cart');
            }}
          >

          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: '/asset/my.svg' }}
            selectedIcon={{ uri: '/asset/my-on.svg' }}
            title="我的"
            key="My"
            dot
            selected={this.props.match.path === '/my'}
            onPress={() => {
              this.props.history.push('/my');
            }}
          >

          </TabBar.Item>
        </TabBar>
      </div >
    )
  }
}


const mapStateToProps = (state) => {
  return {
    ...state
  }
}

export default connect(mapStateToProps)(MyTabbar)